<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>智慧安监</title>
    <link rel="stylesheet" href="../../css/api.css" />
    <link rel="stylesheet" href="../../css/common.css" />
</head>

<body>
    <header class="yt-header">
        <h1 class="yt-header-title">native 示例集</h1>
    </header>
</body>
<script src="./script/api.js"></script>
<script>
    // 全局变量
    var g_pageIndex = 1 // 首页 0，功能菜单 1，个人中心 2
    var g_headerHeight = 44
    var g_footerHeight = 50
    var g_frames = [{
        name: 'home',
        url: './homeFrame.html',
        title: '首页',
        bounces: true
    }, {
        name: 'menu',
        url: './menuFrame.html',
        title: '功能菜单',
        bounces: true
    }, {
        name: 'personalCenter',
        url: './personalCenterFrame.html',
        title: '个人中心',
        bounces: true
    }]



    apiready = function() {
        loadPage()
    }

    function loadPage() {
        renderFrame(g_frames, g_pageIndex)
        renderTabBar()
    }

    /*
     * @method
     * @param { arry } frames 一组frame
     * @param { number } index 默认显示的 frame
     * @desc 初始化一组 frame
     */
    var count = 0
    function renderFrame(frames, index) {
        api.openFrameGroup({
            name: 'main',
            background: '#fff',
            scrollEnabled: true,
            rect: {
                x: 0,
                y: 0,
                w: 'auto',
                h: 'auto',
                marginTop: g_headerHeight,
                marginBottom: g_footerHeight
            },
            vScrollBarEnabled: true,
            index: index,
            frames: frames
        }, function(ret, err) {
            // 当前显示在屏幕上的 frame 变化时会回调
            // BUG: index 参数失效，期望效果设置 index,加载frames[index]，但是此回调当 index 不为0的时候，会执行2次
            // HACK: 定义 count 用于阻止 index 值不是0的时候，阻止第二次运行程序导致 重回到frame[0]
            if (!count && ret) {
                updateTabBar(ret)
                count++
            } else {
                count = 0
            }
        })

        // HACK: 由于上面代码的bug (line 78) 不能设置默认显示 frame 需要这样再设置一遍
        var timeId = setTimeout(function() {
            api.setFrameGroupIndex({
                name: 'main',
                index: index
            })
            clearTimeout(timeId)
        }, 500)

    }

    /*
     * @method
     * @param { object } frame 当前 frame 相关信息
     * @desc frames状态变化，更新 tabBar 按钮状态
     */
    function updateTabBar(frame) {
        if (ui_tabBar) {
            ui_tabBar.setSelect({
                index: frame.index,
                selected: true
            })
        }
    }

    /*
     * @method
     * @desc 加载原生UI组件 tabBar
     */
    var ui_tabBar = null
    function renderTabBar() {
        ui_tabBar = api.require("NVTabBar")
        ui_tabBar.open({
            styles: {
                bg: '#fff',
                h: g_footerHeight,
                dividingLine: {
                    width: 0.5,
                    color: '#fff'
                },
                badge: {
                    bgColor: '#ff0',
                    numColor: '#fff',
                    size: 6.0,
                    fontSize: 10 //数字类型,设置徽章字体大小,默认10。注意:仅支持iOS。
                }
            },
            items: [{
                w: api.winWidth / 3.0,
                bg: {
                    marginB: 0,
                    image: 'rgba(0,0,0,0)'
                },
                iconRect: {
                    w: 25.0,
                    h: 25.0,
                },
                icon: {
                    normal: 'widget://image/NVTabBar/icon-home.png',
                    highlight: 'widget://image/NVTabBar/icon-home-select.png',
                    selected: 'widget://image/NVTabBar/icon-home-select.png'
                },
                title: {
                    text: '首页',
                    size: 12.0,
                    normal: '#696969',
                    selected: '#46BAFF',
                    marginB: 6.0
                }
            }, {
                w: api.winWidth / 3.0,
                bg: {
                    marginB: 0,
                    image: 'rgba(0,0,0,0)'
                },
                iconRect: {
                    w: 25.0,
                    h: 25.0,
                },
                icon: {
                    normal: 'widget://image/NVTabBar/icon-menu.png',
                    highlight: 'widget://image/NVTabBar/icon-menu-select.png',
                    selected: 'widget://image/NVTabBar/icon-menu-select.png'
                },
                title: {
                    text: '功能菜单',
                    size: 12.0,
                    normal: '#696969',
                    selected: '#46BAFF',
                    marginB: 6.0
                }
            }, {
                w: api.winWidth / 3.0,
                bg: {
                    marginB: 0,
                    image: 'rgba(0,0,0,0)'
                },
                iconRect: {
                    w: 25.0,
                    h: 25.0,
                },
                icon: {
                    normal: 'widget://image/NVTabBar/icon-personal.png',
                    highlight: 'widget://image/NVTabBar/icon-personal-select.png',
                    selected: 'widget://image/NVTabBar/icon-personal-select.png'
                },
                title: {
                    text: '个人中心',
                    size: 12.0,
                    normal: '#696969',
                    selected: '#46BAFF',
                    marginB: 6.0
                }
            }],
            selectedIndex: g_pageIndex
        }, function(ret, err) {
            if (ret) {
                api.setFrameGroupIndex({
                    name: 'main',
                    index: ret.index,
                    scroll: true
                })
            }
        })

    }
</script>

</html>
